import React from 'react'
import ReactDOM from 'react-dom'

// 1.点定义
function Hello() {
  // 代码编译之后，会默认开启严格模式，而严格模式下调用函数，就是undefined
  console.log(this);
  return <h1>Hello React</h1>
}
// 使用箭头函数
// const Hello = () =>{
  // 函数式组件当中的 this 是 undefined
//   console.log(this);
//   return <h1>Hello React</h1>
// }
ReactDOM.render(<Hello/>, document.querySelector('#react'))
// 2.在使用，单标签闭合或双标签
// React.render 解析 <Hello /> 标签，发现首字母是大写的，会当做组件进行解析，又发现是一个函数式组件
// 所以内部会调用这个函数，得到一段 JSX(React 元素/虚拟 DOM)，转换成真实 DOM 渲染到页面上面
// 下面写法确实可以出来结果，但是是当做普通函数使用的，而不是一个组件
// ReactDOM.render(Hello(), document.querySelector('#react'))


